import React from 'react';
import { Modal, Spin, Card, Row, Divider, Button, message } from 'antd';
import moment from 'moment';
import { connect } from 'dva';
import DescriptionList from '@/components/DescriptionList';

const { Description } = DescriptionList;

@connect(({ publicdata, loading }) => ({
  detailInfo: publicdata.quoInfo,
  loading: loading.effects['publicdata/fetchQuoInfo'],
}))
class DetailModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = { modalVisible: false };
  }

  componentDidMount() {
    const { onRef } = this.props;
    onRef(this);
  }

  // 获取报价单信息
  // eslint-disable-next-line consistent-return
  getQuoDetail = quoId => {
    const { dispatch } = this.props;
    if (!quoId) {
      return message.warning(`请确认报价单是否正确！`);
    }
    this.setState({ modalVisible: true });
    dispatch({
      type: 'publicdata/fetchDictCode',
      payload: ['PAY_FEES_WAY', 'BIZ_INS_TYPE', 'ISNULL_FLAG', 'PRODUCT_WAGE_TYPE', 'PD_CATE'],
    });
    dispatch({
      type: 'publicdata/fetchQuoInfo',
      payload: { quoId },
    });
  };

  // 模态框显隐
  handleModalVisible = flag => {
    this.setState({
      modalVisible: !!flag,
    });
  };

  render() {
    const { modalVisible } = this.state;
    const { detailInfo, loading = false } = this.props;

    return (
      <Modal
        width={1200}
        title="报价单详情"
        visible={modalVisible}
        footer={[
          <Button type="primary" onClick={() => this.handleModalVisible(false)}>
            关闭
          </Button>,
        ]}
        onCancel={() => this.handleModalVisible(false)}
        destroyOnClose
      >
        <Spin tip="loading..." spinning={loading}>
          <DescriptionList style={{ marginBottom: 24 }}>
            <Description term="报价单名称">{detailInfo.quoName || '--'}</Description>
            <Description term="签约方">{detailInfo.suppName || '--'}</Description>
            <Description term="合同名称">{detailInfo.contName || '--'}</Description>
            <Description term="客户名称">{detailInfo.custName || '--'}</Description>
            <Description term="服务类型">{detailInfo.serTypeName || '--'}</Description>
            <Description term="状态">{detailInfo.quoStateName || '--'}</Description>
            <Description term="是否含税">{detailInfo.taxFlagName || '--'}</Description>
            {detailInfo.taxFlag === '2' ? (
              <Description term="税率">{`${detailInfo.taxRatio}%`}</Description>
            ) : (
              <div />
            )}
            <Description term="创建人">{detailInfo.creName || '--'}</Description>
            <Description term="创建时间">
              {moment(detailInfo.creTime).format('YYYY-MM-DD HH:mm') || '--'}
            </Description>
          </DescriptionList>
          <Row>
            {detailInfo.packList &&
              detailInfo.packList.map((pack, index) => (
                // eslint-disable-next-line react/no-array-index-key
                <Card key={index} style={{width: '100%'}}>
                  {pack.listQuoPd &&
                    // eslint-disable-next-line no-shadow
                    pack.listQuoPd.map((item, index) => (
                      // eslint-disable-next-line react/no-array-index-key
                      <DescriptionList key={index}>
                        <Description term="产品名称">{item.pdName}</Description>
                        {item.listAttr.map(attr => (
                          <Description key={attr.specifAttrId} term={attr.attrName}>
                            {attr.name}
                          </Description>
                        ))}
                      </DescriptionList>
                    ))}
                  {pack.priceList.length ? <Divider /> : null}
                  {pack.priceList &&
                    // eslint-disable-next-line no-shadow
                    pack.priceList.map((item, index) => (
                      // eslint-disable-next-line react/no-array-index-key
                      <DescriptionList key={index}>
                        <Description term="执行地区">{item.areaName || '--'}</Description>
                        <Description term="报价金额">
                          {item.quotePrice === 0 ? 0 : item.quotePrice || '--'}
                        </Description>
                        {item.taxMoney == null ? (
                          <div />
                        ) : (
                          <Description term="税金">{item.taxMoney || '--'}</Description>
                        )}
                      </DescriptionList>
                    ))}
                </Card>
              ))}
          </Row>
        </Spin>
      </Modal>
    );
  }
}
export default DetailModal;
